<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
        <meta name="author" content="Coderthemes">

        <!-- App Favicon -->
        <link rel="shortcut icon" href="assets/images/favicon.ico">

        <!-- App title -->
        <title>Uplon - Responsive Admin Dashboard Template</title>

        <!-- Switchery css -->
        <link href="assets/plugins/switchery/switchery.min.css" rel="stylesheet" />

        <!-- Bootstrap CSS -->
        <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

        <!-- App CSS -->
        <link href="assets/css/style.css" rel="stylesheet" type="text/css" />

        <!-- HTML5 Shiv and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
        <!-- Modernizr js -->
        <script src="assets/js/modernizr.min.js"></script>

    </head>


    <body class="fixed-left" id="do-nicescrol">
                        <!-- Row start -->
                        <div class="row">
                            <div class="col-md-12">
                                <div class="card-box">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <h4 class="header-title m-t-0">默认按钮</h4>
                                            <p class="text-muted m-b-20 font-13">
                                                将类名用在 <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, 或者 <code>&lt;input&gt;</code> 这些元素上.
                                            </p>

                                            <div class="button-list">
                                                <button type="button" class="btn btn-primary waves-effect waves-light">原始的</button>
                                                <button type="button" class="btn btn-secondary waves-effect">其次的</button>
                                                <button type="button" class="btn btn-success waves-effect waves-light">成功</button>
                                                <button type="button" class="btn btn-info waves-effect waves-light">信息</button>
                                                <button type="button" class="btn btn-warning waves-effect waves-light">警告</button>
                                                <button type="button" class="btn btn-danger waves-effect waves-light">危险</button>
                                                <button type="button" class="btn btn-dark waves-effect waves-light">暗黑色</button>
                                                <button type="button" class="btn btn-purple waves-effect waves-light">紫色</button>
                                                <button type="button" class="btn btn-pink waves-effect waves-light">粉色</button>
                                                <button type="button" class="btn btn-link waves-effect">跳转</button>
                                                <button type="button" class="btn btn-custom waves-effect waves-light">惯用的</button>
                                            </div>
                                        </div>

                                        <div class="col-md-6">
                                            <h4 class="header-title m-t-0">默认圆形按钮</h4>
                                            <p class="text-muted m-b-20 font-13">
                                                添加 <code>.btn-rounded</code> 这个类名到默认按钮上.
                                            </p>

                                            <div class="button-list">
                                                <button type="button" class="btn btn-primary btn-rounded waves-effect waves-light">原始的</button>
                                                <button type="button" class="btn btn-secondary btn-rounded waves-effect">其次的</button>
                                                <button type="button" class="btn btn-success btn-rounded waves-effect waves-light">成功</button>
                                                <button type="button" class="btn btn-info btn-rounded waves-effect waves-light">信息</button>
                                                <button type="button" class="btn btn-warning btn-rounded waves-effect waves-light">警告</button>
                                                <button type="button" class="btn btn-danger btn-rounded waves-effect waves-light">危险</button>
                                                <button type="button" class="btn btn-dark btn-rounded waves-effect waves-light">暗黑色</button>
                                                <button type="button" class="btn btn-purple btn-rounded waves-effect waves-light">紫色</button>
                                                <button type="button" class="btn btn-pink btn-rounded waves-effect waves-light">粉色</button>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row m-t-50">
                                        <div class="col-md-6 m-t-20">
                                            <h4 class="header-title m-t-0">外边框按钮</h4>
                                            <p class="text-muted m-b-20 font-13">
                                                如果你需要按钮，但同时不想要背景色，那么你可以添加 <code>.btn-*-outline</code> 这个类名到按钮上来实现.
                                            </p>

                                            <div class="button-list">
                                                <button type="button" class="btn btn-outline-primary waves-effect waves-light">原始的</button>
                                                <button type="button" class="btn btn-outline-secondary waves-effect">其次的</button>
                                                <button type="button" class="btn btn-outline-success waves-effect waves-light">成功</button>
                                                <button type="button" class="btn btn-outline-info waves-effect waves-light">信息</button>
                                                <button type="button" class="btn btn-outline-warning waves-effect waves-light">警告</button>
                                                <button type="button" class="btn btn-outline-danger waves-effect waves-light">危险</button>
                                                <button type="button" class="btn btn-outline-dark waves-effect waves-light">暗黑色</button>
                                                <button type="button" class="btn btn-outline-purple waves-effect waves-light">紫色</button>
                                                <button type="button" class="btn btn-outline-pink waves-effect waves-light">粉色</button>
                                                <button type="button" class="btn btn-outline-custom waves-effect waves-light">惯用的</button>
                                            </div>
                                        </div>

                                        <div class="col-md-6 m-t-20">
                                            <h4 class="header-title m-t-0">圆形外边框</h4>
                                            <p class="text-muted m-b-20 font-13">
                                                如果你需要圆形按钮，但同时不想要背景色，那么你可以添加 <code>.btn-*-outline</code> <code>.btn-rounded</code> 这个类名到按钮上来实现.
                                            </p>

                                            <div class="button-list">
                                                <button type="button" class="btn btn-outline-primary btn-rounded waves-effect waves-light">原始的</button>
                                                <button type="button" class="btn btn-outline-secondary btn-rounded waves-effect">其次的</button>
                                                <button type="button" class="btn btn-outline-success btn-rounded waves-effect waves-light">成功</button>
                                                <button type="button" class="btn btn-outline-info btn-rounded waves-effect waves-light">信息</button>
                                                <button type="button" class="btn btn-outline-warning btn-rounded waves-effect waves-light">警告</button>
                                                <button type="button" class="btn btn-outline-danger btn-rounded waves-effect waves-light">危险</button>
                                                <button type="button" class="btn btn-outline-dark btn-rounded waves-effect waves-light">暗黑色</button>
                                                <button type="button" class="btn btn-outline-purple btn-rounded waves-effect waves-light">紫色</button>
                                                <button type="button" class="btn btn-outline-pink btn-rounded waves-effect waves-light">粉色</button>
                                                <button type="button" class="btn btn-outline-custom btn-rounded waves-effect waves-light">惯用的</button>
                                            </div>

                                        </div>
                                    </div>

                                    <div class="row m-t-50">
                                        <div class="col-md-6 m-t-20">
                                            <h4 class="header-title m-t-0">自定义宽度按钮</h4>
                                            <p class="text-muted m-b-30 font-13">
                                               创建一个最小宽度的按钮时，需要添加 <code>.w-xs</code>, <code>.w-sm</code>, <code>.w-md</code> 或者 <code>.w-lg</code>这些类名.
                                            </p>

                                            <div class="button-list">
                                                <button type="button" class="btn btn-primary waves-effect waves-light w-xs">Xs</button>
                                                <button type="button" class="btn btn-purple waves-effect waves-light w-sm">Small</button>
                                                <button type="button" class="btn btn-info waves-effect waves-light w-md">Middle</button>
                                                <button type="button" class="btn btn-warning waves-effect waves-light w-lg">Large</button>
                                            </div>
                                        </div>

                                        <div class="col-md-6 m-t-20">
                                            <h4 class="header-title m-t-0">自定义尺寸按钮</h4>
                                            <p class="text-muted m-b-30 font-13">
                                               添加<code>.btn-lg</code>, <code>.btn-sm</code> 来定义按钮尺寸.
                                            </p>

                                            <div class="button-list">
                                                <button class="btn btn-primary waves-effect waves-light btn-lg">大按钮</button>
                                                <button class="btn btn-success waves-effect waves-light btn-sm">小按钮</button>
                                            </div>
                                        </div>

                                    </div>

                                    <div class="row m-t-50">
                                        <div class="col-md-6 m-t-20">
                                            <h4 class="header-title m-t-0">按钮标志</h4>
                                            <p class="text-muted m-b-20 font-13">
                                                用在 <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>,
                                                或者 <code>&lt;input&gt;</code> 这两个标签上. 同时在 <code>&lt;span&gt;</code>
                                                标签上添加 <code>.btn-label</code> 任何 <code>icon</code> 类在该标签上. 如果想在标签右边添加符号，就添加类 <code>.btn-label-right</code> 在 <code>&lt;span&gt;</code>标签上
                                            </p>

                                            <div class="button-list">
                                                <button type="button" class="btn btn-success waves-effect waves-light">
                                                   <span class="btn-label"><i class="fa fa-check"></i>
                                                   </span>成功</button>

                                                <button type="button" class="btn btn-danger waves-effect waves-light">
                                                   <span class="btn-label"><i class="fa fa-times"></i>
                                                   </span>危险</button>

                                                <button type="button" class="btn btn-info waves-effect waves-light">
                                                   <span class="btn-label"><i class="fa fa-exclamation"></i>
                                                   </span>信息</button>

                                                <button type="button" class="btn btn-warning waves-effect waves-light">
                                                   <span class="btn-label"><i class="fa fa-warning"></i>
                                                   </span>警告</button>
                                                <br>

                                                <button type="button" class="btn btn-primary waves-effect waves-light">
                                                   <span class="btn-label"><i class="fa fa-arrow-left"></i>
                                                   </span>左</button>

                                                <button type="button" class="btn btn-success waves-effect waves-light">右
                                                   <span class="btn-label btn-label-right"><i class="fa fa-arrow-right"></i>
                                                   </span>
                                                </button>
                                            </div>
                                        </div>

                                        <div class="col-md-6 m-t-20">
                                            <h4 class="header-title m-t-0">圆边带符号按钮</h4>
                                            <p class="text-muted m-b-20 font-13">
                                                在 <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>,
                                                or <code>&lt;input&gt;</code> 这些标签上添加. 同时在 <code>&lt;span&gt;</code>
                                                标签上 <code>.btn-label</code> 添加任何 <code>icon</code> 类名. I如果想在标签右边添加符号，就添加类 <code>.btn-label-right</code> 在 <code>&lt;span&gt;</code>标签上
                                            </p>

                                            <div class="button-list">
                                                <button type="button" class="btn btn-success btn-rounded waves-effect waves-light">
                                                   <span class="btn-label"><i class="fa fa-check"></i>
                                                   </span>成功</button>

                                                <button type="button" class="btn btn-danger btn-rounded waves-effect waves-light">
                                                   <span class="btn-label"><i class="fa fa-times"></i>
                                                   </span>危险</button>

                                                <button type="button" class="btn btn-info btn-rounded waves-effect waves-light">
                                                   <span class="btn-label"><i class="fa fa-exclamation"></i>
                                                   </span>信息</button>

                                                <button type="button" class="btn btn-warning btn-rounded waves-effect waves-light">
                                                   <span class="btn-label"><i class="fa fa-warning"></i>
                                                   </span>警告</button>
                                                <br>

                                                <button type="button" class="btn btn-primary btn-rounded waves-effect waves-light">
                                                   <span class="btn-label"><i class="fa fa-arrow-left"></i>
                                                   </span>左</button>

                                                <button type="button" class="btn btn-success btn-rounded waves-effect waves-light">右
                                                   <span class="btn-label btn-label-right"><i class="fa fa-arrow-right"></i>
                                                   </span>
                                                </button>
                                            </div>

                                        </div>
                                    </div>


                                    <div class="row m-t-50">
                                        <div class="col-md-6 m-t-20">
                                            <h4 class="header-title m-t-0">符号按钮</h4>
                                            <p class="text-muted m-b-20 font-13">
                                                只有符号的按钮.
                                            </p>

                                            <div class="button-list">
                                                <button class="btn waves-effect btn-secondary"> <i class="fa fa-heart-o"></i> </button>
                                                <button class="btn waves-effect waves-light btn-danger disabled"> <i class="fa fa-remove"></i> </button>
                                                <button class="btn waves-effect waves-light btn-purple"> <i class="fa fa-music"></i> </button>
                                                <button class="btn waves-effect waves-light btn-primary"> <i class="fa fa-star"></i> </button>
                                                <button class="btn waves-effect waves-light btn-success"> <i class="fa fa-thumbs-o-up"></i> </button>
                                                <button class="btn waves-effect waves-light btn-info"> <i class="fa fa-keyboard-o"></i> </button>
                                                <button class="btn waves-effect waves-light btn-warning"> <i class="fa fa-wrench"></i> </button>
                                                <br>
                                                <button class="btn btn-secondary waves-effect"> <i class="fa fa-heart m-r-5"></i> <span>喜欢</span> </button>
                                                <button class="btn btn-dark waves-effect waves-light"> <i class="fa fa-envelope-o m-r-5"></i> <span>分享</span> </button>
                                                <button class="btn btn-warning waves-effect waves-light"> <i class="fa fa-rocket m-r-5"></i> <span>发动</span> </button>
                                                <button class="btn btn-info waves-effect waves-light disabled"> <i class="fa fa-cloud m-r-5"></i> <span>云端主机服务</span> </button>
                                                <button class="btn btn-pink waves-effect waves-light"> <span>空中书籍</span> <i class="fa fa-plane m-l-5"></i> </button>
                                                <button class="btn btn-purple waves-effect waves-light"> <span>捐款</span> <i class="fa fa-money m-l-5"></i> </button>
                                            </div>

                                        </div>

                                        <div class="col-md-6 m-t-20">
                                            <h4 class="header-title m-t-0">整行按钮</h4>
                                            <p class="text-muted m-b-20 font-13">
                                                创建一个行元素按钮,用添加 <code>.btn-block</code>类名.
                                            </p>

                                            <div class="button-list">
                                                <button type="button" class="btn btn-block btn-lg btn-primary waves-effect waves-light">行按钮</button>
                                                <button type="button" class="btn btn-block btn--md btn-pink waves-effect waves-light active">行按钮</button>
                                                <button type="button" class="btn btn-block btn-sm btn-success waves-effect waves-light">行按钮</button>
                                            </div>

                                        </div>
                                    </div>

                                    <div class="row m-t-50">
                                        <div class="col-md-6 m-t-20">
                                            <h4 class="header-title m-t-0">带符号的社交按钮</h4>
                                            <p class="text-muted m-b-20 font-13">
                                                用类名 <code>.btn-@yoursocial</code> 添加在父元素.
                                            </p>

                                            <div class="button-list">
                                                <button type="button" class="btn btn-facebook waves-effect waves-light">
                                                   <span class="btn-label"><i class="fa fa-facebook"></i>
                                                   </span>Facebook</button>

                                                <button type="button" class="btn btn-twitter waves-effect waves-light">
                                                   <span class="btn-label"><i class="fa fa-twitter"></i>
                                                   </span>Twitter</button>

                                                <button type="button" class="btn btn-linkedin waves-effect waves-light">
                                                   <span class="btn-label"><i class="fa fa-linkedin"></i>
                                                   </span>Linkdin</button>

                                                <button type="button" class="btn btn-dribbble waves-effect waves-light">
                                                   <span class="btn-label"><i class="fa fa-dribbble"></i>
                                                   </span>Dribbble</button>

                                                <button type="button" class="btn btn-googleplus waves-effect waves-light">
                                                   <span class="btn-label"><i class="fa fa-google-plus"></i>
                                                   </span>Google+</button>

                                                <button type="button" class="btn btn-instagram waves-effect waves-light">
                                                    <span class="btn-label"><i class="fa fa-instagram"></i> </span>Instagram
                                                </button>

                                                <button type="button" class="btn btn-pinterest waves-effect waves-light">
                                                    <span class="btn-label"><i class="fa fa-pinterest"></i> </span>Pinterest
                                                </button>

                                                <button type="button" class="btn btn-dropbox waves-effect waves-light">
                                                    <span class="btn-label"><i class="fa fa-dropbox"></i> </span>Dropbox
                                                </button>

                                                <button type="button" class="btn btn-flickr waves-effect waves-light">
                                                    <span class="btn-label"><i class="fa fa-flickr"></i> </span>Flickr
                                                </button>

                                                <button type="button" class="btn btn-tumblr waves-effect waves-light">
                                                    <span class="btn-label"><i class="fa fa-tumblr"></i> </span>Tumblr
                                                </button>

                                                <button type="button" class="btn btn-skype waves-effect waves-light">
                                                    <span class="btn-label"><i class="fa fa-skype"></i> </span>Skype
                                                </button>

                                                <button type="button" class="btn btn-youtube waves-effect waves-light">
                                                    <span class="btn-label"><i class="fa fa-youtube"></i> </span>Youtube
                                                </button>

                                                <button type="button" class="btn btn-github waves-effect waves-light">
                                                    <span class="btn-label"><i class="fa fa-github"></i> </span>Github
                                                </button>

                                            </div>

                                        </div>

                                        <div class="col-md-6 m-t-20">
                                            <h4 class="header-title m-t-0">社交按钮</h4>
                                            <p class="text-muted m-b-20 font-13">
                                                在父元素上添加 <code>.btn-@yoursocial</code> 这个类名.
                                            </p>

                                            <div class="button-list">
                                                <button type="button" class="btn btn-facebook waves-effect waves-light">
                                                    <i class="fa fa-facebook"></i>
                                                </button>

                                                <button type="button" class="btn btn-twitter waves-effect waves-light">
                                                    <i class="fa fa-twitter"></i>
                                                </button>

                                                <button type="button" class="btn btn-linkedin waves-effect waves-light">
                                                    <i class="fa fa-linkedin"></i>
                                                </button>

                                                <button type="button" class="btn btn-dribbble waves-effect waves-light">
                                                    <i class="fa fa-dribbble"></i>
                                                </button>

                                                <button type="button" class="btn btn-googleplus waves-effect waves-light">
                                                    <i class="fa fa-google-plus"></i>
                                                </button>

                                                <button type="button" class="btn btn-instagram waves-effect waves-light">
                                                    <i class="fa fa-instagram"></i>
                                                </button>

                                                <button type="button" class="btn btn-pinterest waves-effect waves-light">
                                                    <i class="fa fa-pinterest"></i>
                                                </button>

                                                <button type="button" class="btn btn-dropbox waves-effect waves-light">
                                                    <i class="fa fa-dropbox"></i>
                                                </button>

                                                <button type="button" class="btn btn-flickr waves-effect waves-light">
                                                    <i class="fa fa-flickr"></i>
                                                </button>

                                                <button type="button" class="btn btn-tumblr waves-effect waves-light">
                                                    <i class="fa fa-tumblr"></i>
                                                </button>

                                                <button type="button" class="btn btn-skype waves-effect waves-light">
                                                    <i class="fa fa-skype"></i>
                                                </button>

                                                <button type="button" class="btn btn-youtube waves-effect waves-light">
                                                    <i class="fa fa-youtube"></i>
                                                </button>

                                                <button type="button" class="btn btn-github waves-effect waves-light">
                                                    <i class="fa fa-github"></i>
                                                </button>


                                                <br>


                                                <button type="button" class="btn btn-facebook waves-effect waves-light">
                                                    <i class="fa fa-facebook m-r-5"></i> Facebook
                                                </button>

                                                <button type="button" class="btn btn-twitter waves-effect waves-light">
                                                    <i class="fa fa-twitter m-r-5"></i> Twitter
                                                </button>

                                                <button type="button" class="btn btn-linkedin waves-effect waves-light">
                                                    <i class="fa fa-linkedin m-r-5"></i> Linkedin
                                                </button>

                                                <button type="button" class="btn btn-dribbble waves-effect waves-light">
                                                    <i class="fa fa-dribbble m-r-5"></i> Dribbble
                                                </button>

                                                <button type="button" class="btn btn-googleplus waves-effect waves-light">
                                                    <i class="fa fa-google-plus m-r-5"></i> Google+
                                                </button>

                                                <button type="button" class="btn btn-instagram waves-effect waves-light">
                                                    <i class="fa fa-instagram m-r-5"></i> Instagram
                                                </button>

                                                <button type="button" class="btn btn-pinterest waves-effect waves-light">
                                                    <i class="fa fa-pinterest m-r-5"></i> Pinterest
                                                </button>

                                                <button type="button" class="btn btn-dropbox waves-effect waves-light">
                                                    <i class="fa fa-dropbox m-r-5"></i> Dropbox
                                                </button>

                                                <button type="button" class="btn btn-flickr waves-effect waves-light">
                                                    <i class="fa fa-flickr m-r-5"></i> Flickr
                                                </button>

                                                <button type="button" class="btn btn-tumblr waves-effect waves-light">
                                                    <i class="fa fa-tumblr m-r-5"></i> Tumblr
                                                </button>

                                                <button type="button" class="btn btn-skype waves-effect waves-light">
                                                    <i class="fa fa-skype m-r-5"></i> Skype
                                                </button>

                                                <button type="button" class="btn btn-youtube waves-effect waves-light">
                                                    <i class="fa fa-youtube m-r-5"></i> Youtube
                                                </button>

                                                <button type="button" class="btn btn-github waves-effect waves-light">
                                                    <i class="fa fa-github m-r-5"></i> Github
                                                </button>
                                            </div>

                                        </div>
                                    </div><!-- end row -->

                                    <div class="row m-t-50">
                                        <div class="col-md-6 m-t-20">
                                            <h4 class="header-title m-t-0">组按钮</h4>
                                            <p class="text-muted m-b-20 font-13">
                                                用 <code>.btn-group</code> 类包含一系列类 <code>.btn</code>.
                                            </p>

                                            <div class="btn-group m-b-20">
                                                <button type="button" class="btn btn-secondary waves-effect">Left</button>
                                                <button type="button" class="btn btn-secondary waves-effect">Middle</button>
                                                <button type="button" class="btn btn-secondary waves-effect">Right</button>
                                            </div>
                                            <br>

                                            <div class="btn-group m-b-20">
                                                <button type="button" class="btn btn-secondary waves-effect">1</button>
                                                <button type="button" class="btn btn-secondary waves-effect">2</button>
                                                <button type="button" class="btn btn-secondary waves-effect">3</button>
                                                <button type="button" class="btn btn-secondary waves-effect">4</button>
                                            </div>
                                            <div class="btn-group m-b-20">
                                                <button type="button" class="btn btn-secondary waves-effect">5</button>
                                                <button type="button" class="btn btn-secondary waves-effect">6</button>
                                                <button type="button" class="btn btn-secondary waves-effect">7</button>
                                            </div>
                                            <div class="btn-group m-b-20">
                                                <button type="button" class="btn btn-secondary waves-effect">8</button>
                                            </div>
                                            <br>
                                            <div class="btn-group m-b-20">
                                                <button type="button" class="btn btn-secondary waves-effect">1</button>
                                                <button type="button" class="btn btn-secondary waves-effect">2</button>
                                                <button type="button" class="btn btn-secondary waves-effect">3</button>
                                                <div class="btn-group">
                                                    <button type="button" class="btn btn-secondary dropdown-toggle  waves-effect" data-toggle="dropdown" aria-expanded="false"> Dropdown <span class="caret"></span> </button>
                                                    <div class="dropdown-menu">
                                                        <a class="dropdown-item" href="ui-buttons.html#">Dropdown link</a>
                                                        <a class="dropdown-item" href="ui-buttons.html#">Dropdown link</a>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-3">
                                                    <div class="btn-group-vertical m-b-20">
                                                        <button type="button" class="btn btn-secondary waves-effect">Top</button>
                                                        <button type="button" class="btn btn-secondary waves-effect">Middle</button>
                                                        <button type="button" class="btn btn-secondary waves-effect">Bottom</button>
                                                    </div>
                                                </div>
                                                <div class="col-md-3">
                                                    <div class="btn-group-vertical m-b-20">
                                                        <button type="button" class="btn btn-secondary waves-effect">Button 1</button>
                                                        <button type="button" class="btn btn-secondary waves-effect">Button 2</button>
                                                        <button type="button" class="btn btn-secondary dropdown-toggle waves-effect" data-toggle="dropdown" aria-expanded="false"> Button 3 <span class="caret"></span> </button>
                                                        <div class="dropdown-menu">
                                                            <a class="dropdown-item" href="ui-buttons.html#">Dropdown link</a>
                                                            <a class="dropdown-item" href="ui-buttons.html#">Dropdown link</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>

                                        <div class="col-md-6 m-t-20">
                                            <h4 class="header-title m-t-0">按钮插件</h4>
                                            <p class="text-muted m-b-20 font-13">
                                                可以在按钮上做更多. 控制按钮央视或者创造一组按钮像切换组件一样.
                                            </p>

                                            <button type="button" class="btn btn-primary waves-effect waves-light" data-toggle="button"
                                                    aria-pressed="false" autocomplete="off">
                                                Single toggle
                                            </button>

                                            <br><br>

                                            <div class="btn-group" data-toggle="buttons">
                                                <label class="btn btn-primary waves-effect waves-light active">
                                                    <input type="checkbox" checked autocomplete="off"> Checkbox 1
                                                    (pre-checked)
                                                </label>
                                                <label class="btn btn-primary waves-effect waves-light">
                                                    <input type="checkbox" autocomplete="off"> Checkbox 2
                                                </label>
                                                <label class="btn btn-primary waves-effect waves-light">
                                                    <input type="checkbox" autocomplete="off"> Checkbox 3
                                                </label>
                                            </div>

                                            <br><br>

                                            <div class="btn-group" data-toggle="buttons">
                                                <label class="btn btn-primary waves-effect waves-light active">
                                                    <input type="radio" name="options" id="option1" autocomplete="off"
                                                           checked> Radio 1 (preselected)
                                                </label>
                                                <label class="btn btn-primary waves-effect waves-light">
                                                    <input type="radio" name="options" id="option2" autocomplete="off">
                                                    Radio 2
                                                </label>
                                                <label class="btn btn-primary waves-effect waves-light">
                                                    <input type="radio" name="options" id="option3" autocomplete="off">
                                                    Radio 3
                                                </label>
                                            </div>

                                        </div>

                                    </div> <!-- end row -->

                                </div>
                            </div>

                        </div>
                        <!-- End of Row -->


                    </div> <!-- container -->

                </div> <!-- content -->



            </div>
            <!-- End content-page -->


            <!-- ============================================================== -->
            <!-- End Right content here -->
            <!-- ============================================================== -->


            <!-- Right Sidebar -->
            <div class="side-bar right-bar">
                <div class="nicescroll">
                    <ul class="nav nav-pills nav-justified text-xs-center">
                        <li class="nav-item">
                            <a href="ui-buttons.html#home-2"  class="nav-link active" data-toggle="tab" aria-expanded="false">
                                动作
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="ui-buttons.html#messages-2" class="nav-link" data-toggle="tab" aria-expanded="true">
                                设置
                            </a>
                        </li>
                    </ul>

                    <div class="tab-content">
                        <div class="tab-pane fade active show" id="home-2">
                            <div class="timeline-2">
                                <div class="time-item">
                                    <div class="item-info">
                                        <small class="text-muted">5分钟以前</small>
                                        <p><strong><a href="ui-buttons.html#" class="text-info">John Doe</a></strong> 下载一张照片 <strong>"DSC000586.jpg"</strong></p>
                                    </div>
                                </div>

                                <div class="time-item">
                                    <div class="item-info">
                                        <small class="text-muted">30分钟以前</small>
                                        <p><a href="" class="text-info">Lorem</a> 评论你的文章.</p>
                                        <p><em>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. 阿利克特拉雷特告诉我们. "</em></p>
                                    </div>
                                </div>

                                <div class="time-item">
                                    <div class="item-info">
                                        <small class="text-muted">59分钟以前</small>
                                        <p><a href="" class="text-info">Jessi</a> 和<a href="ui-buttons.html#" class="text-success">John Doe</a>一起参加了会议.</p>
                                        <p><em>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. 阿利克特拉雷特告诉我们. "</em></p>
                                    </div>
                                </div>

                                <div class="time-item">
                                    <div class="item-info">
                                        <small class="text-muted">1小时以前</small>
                                        <p><strong><a href="ui-buttons.html#" class="text-info">John Doe</a></strong>下载两张新照片</p>
                                    </div>
                                </div>

                                <div class="time-item">
                                    <div class="item-info">
                                        <small class="text-muted">3小时以前</small>
                                        <p><a href="" class="text-info">Lorem</a> 评论你的文章.</p>
                                        <p><em>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. 阿利克特拉雷特告诉我们. "</em></p>
                                    </div>
                                </div>

                                <div class="time-item">
                                    <div class="item-info">
                                        <small class="text-muted">5小时以前</small>
                                        <p><a href="" class="text-info">Jessi</a> 和<a href="ui-buttons.html#" class="text-success">John Doe</a>参加了一场会议.</p>
                                        <p><em>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. 阿利克特拉雷特告诉我们. "</em></p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane fade" id="messages-2">

                            <div class="row m-t-10">
                                <div class="col-8">
                                    <h5 class="m-0">通知</h5>
                                    <p class="text-muted m-b-0"><small>你需要他们?</small></p>
                                </div>
                                <div class="col-4 text-right">
                                    <input type="checkbox" checked data-plugin="switchery" data-color="#1bb99a" data-size="small"/>
                                </div>
                            </div>

                            <div class="row m-t-10">
                                <div class="col-8">
                                    <h5 class="m-0">API入口</h5>
                                    <p class="m-b-0 text-muted"><small>可以/不可以 通道</small></p>
                                </div>
                                <div class="col-4 text-right">
                                    <input type="checkbox" checked data-plugin="switchery" data-color="#1bb99a" data-size="small"/>
                                </div>
                            </div>

                            <div class="row m-t-10">
                                <div class="col-8">
                                    <h5 class="m-0">自动上传</h5>
                                    <p class="m-b-0 text-muted"><small>持续上传</small></p>
                                </div>
                                <div class="col-4 text-right">
                                    <input type="checkbox" checked data-plugin="switchery" data-color="#1bb99a" data-size="small"/>
                                </div>
                            </div>

                            <div class="row m-t-10">
                                <div class="col-8">
                                    <h5 class="m-0">在线状态</h5>
                                    <p class="m-b-0 text-muted"><small>所有人可见你的状态</small></p>
                                </div>
                                <div class="col-4 text-right">
                                    <input type="checkbox" checked data-plugin="switchery" data-color="#1bb99a" data-size="small"/>
                                </div>
                            </div>

                        </div>
                
            <!-- /Right-bar -->

            <footer class="footer text-right">
                2016 - 2017 © Uplon.
            </footer>


        </div>
        <!-- END wrapper -->


        <script>
            var resizefunc = [];
        </script>

        <!-- jQuery  -->
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/tether.min.js"></script><!-- Tether for Bootstrap -->
        <script src="assets/js/bootstrap.min.js"></script>
        <script src="assets/js/detect.js"></script>
        <script src="assets/js/fastclick.js"></script>
        <script src="assets/js/jquery.blockUI.js"></script>
        <script src="assets/js/waves.js"></script>
        <script src="assets/js/jquery.nicescroll.js"></script>
        <script src="assets/js/jquery.scrollTo.min.js"></script>
        <script src="assets/js/jquery.slimscroll.js"></script>
        <script src="assets/plugins/switchery/switchery.min.js"></script>

        <!-- App js -->
        <script src="assets/js/jquery.core.js"></script>
        <script src="assets/js/jquery.app.js"></script>
        <script type="text/javascript">
            $(document).ready(
                 function() { 
                  $("#do-nicescrol").niceScroll({oneaxismousemode: false,cursorcolor: "#999",horizrailenabled: false});
                 }
                );
        </script>

    </body>
</html>